<template>
    <div class="CesiumViewer"
         @viewerAlready="viewerAlready"
         v-loading="loading"
         element-loading-text="Viewer拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255,0.8)">
        <div id="cesiumContainer">
            <!--普通加载的组件-->
            <slot name="slotBefore"></slot>
            <div v-if="viewerReady">
                <!--viewer加载完成时加载的组件-->
                <slot name="slotAfter"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CesiumViewer",
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        props: {},
        data() {
            return {
                viewerReady: false,
                loading:true
            }
        },
        methods: {
            //初始化Cesium
            cesiumReady() {
                Cesium.Ion.defaultAccessToken =
                    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNzdhOTgxZS0zMzMwLTQ4YTAtYjlkNy1kMDRmNzU3ZjI2MjgiLCJpZCI6NjIyMzUsImlhdCI6MTYyNjg1MDU1OH0.ETpPvP99Sze2XW5JByp2vyK1F6R_P9Ojn-W7OE8KeA8";
                let params = {
                    geocoder: false, //是否显示地名查找控件
                    homeButton: false,
                    SceneModePicker: false, //是否显示投影方式控件
                    selectionIndicator: false,
                    baseLayerPicker: false, //是否显示图层选择控件
                    navigationHelpButton: false, //是否显示帮助信息控件
                    animation: false, // 是否显示动画控件
                    // creditContainer: "credit",
                    timeline: false, //是否显示时间线控件
                    fullscreenButton: false,
                    vrButton: false,
                    infoBox: false, //是否显示点击要素之后显示的信息
                    // requestRenderMode: true, //启用请求渲染模式
                    scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存
                    sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
                    terrainProvider: new Cesium.CesiumTerrainProvider({
                        url: Cesium.IonResource.fromAssetId(1),
                    }),
                };
                //视角定位
                Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
                    75, // 东
                    0, // 南
                    140, // 西
                    60 // 北
                );
                window.viewer = new Cesium.Viewer("cesiumContainer", params);
                window.viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏版本信息
                // window.viewer.scene.globe.depthTestAgainstTerrain=true; //设置该属性为 true\false，开启\关闭 地形遮盖(高程遮挡）
                //天地图注记服务
                // window.viewer.imageryLayers.addImageryProvider(
                //         new Cesium.IonImageryProvider({ assetId: 3 })
                // );
                this.viewerReady = true;
                this.loading=false;
                this.$emit("viewerAlready");
            },
            viewerAlready() {
            }
        },
        beforeCreate() {
            console.log("viewerbeforecreate")
        },
        created() {
            console.log("viewercreated")
        },
        beforeMount() {
            console.log("viewerbeforeMount")
        },
        mounted() {
            this.cesiumReady();
            console.log("viewermounted")
        }
    };
</script>
<style>
    #cesiumContainer .cesium-infoBox {
        background: rgba(27, 27, 156, 0.8);
    }

    #cesiumContainer .cesium-infoBox-title {
        background: rgba(26, 25, 113, 0.5);
    }

    #cesiumContainer button.cesium-infoBox-camera {
        display: none;
    }
    .CesiumViewer .el-loading-mask{
        font-size: 120px;
    }
</style>
